<template>
  <div>
    <el-container>
      <el-header>Header</el-header>
      <el-container>
        <el-aside width="200px">Aside</el-aside>
        <el-main>
          <el-table style="width: 100%" :border="true" :data="showData">
            <el-table-column prop="id" label="#" width="50"></el-table-column>
            <el-table-column prop="username" label="姓名" width="100"></el-table-column>
            <el-table-column prop="email" label="邮箱"></el-table-column>
            <el-table-column prop="mobile" label="电话"></el-table-column>
            <el-table-column prop="role_name" label="角色"></el-table-column>
            <el-table-column prop="create_time" label="注册时间"></el-table-column>
            <el-table-column prop="mg_state" label="状态">
              <el-switch
                style="display: block"
                v-model="value2"
                active-color="#13ce66"
                inactive-color="#ff4949"
              ></el-switch>
            </el-table-column>
            <el-table-column label="操作">
              <el-row>
                <el-button type="primary" icon="el-icon-edit" circle></el-button>
                <el-button type="danger" icon="el-icon-delete" circle></el-button>
                <el-button type="warning" icon="el-icon-star-off" circle></el-button>
              </el-row>
            </el-table-column>
          </el-table>
          <el-pagination
            layout="prev, pager, next"
            :total="list.length"
            :page-size="5"
            @current-change="currentChange"
          ></el-pagination>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      list: [],
      value2: true,
      showData: [],
      currentPage: 1,
      currentFlage: 5,
    };
  },
  methods: {
    currentChange(page) {
      console.log(page);
      alert(222)
      this.showData = [];
      this.currentPage = page;
      var end = this.currentFlage * page;
      if (end > this.list.length) {
        end = this.list.length;
      }

      var start = this.currentFlage * (page - 1);
      console.log(end ,'=====================',start)
      for (let index = start; index < end; index++) {
        this.showData.push(this.list[index]);
      }
    },
  },
  mounted() {
    axios.get("http://localhost:8080/data.json").then((res) => {
      // console.log(res.data.data.users);
      this.list = res.data.data.users;

      for (let index = 0; index < this.currentFlage; index++) {
        this.showData.push(this.list[index]);
      }
    });
  },
};
</script>

<style scoped>
.el-header,
.el-footer {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
  line-height: 200px;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  line-height: 30px;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
</style>